<template>
  <div class="num-layout">
    <dv-border-box-12
      class="icon-layout border11"
      v-for="(item, index) in dataV"
      :key="index"
      :color="['#0d4589']"
      backgroundColor="rgba(0, 0, 0, 0.05)"
    >
      <a-icon v-if="index == 0" type="reconciliation" class="icon"></a-icon>
      <a-icon v-if="index == 1" type="hourglass" class="icon"></a-icon>
      <a-icon v-if="index == 2" type="import" class="icon"></a-icon>
      <a-icon v-if="index == 3" type="close-square" class="icon"></a-icon>
      <div class="right">
        <div v-if="index == 3">
          <p class="large">{{ Number(item.num).toFixed(2) }}</p>
          <p class="text">{{ item.title }}(KG)</p>
        </div>
        <div v-else>
          <p class="large">{{ item.num }}</p>
          <p class="text">{{ item.title }}</p>
        </div>
      </div>
    </dv-border-box-12>
    <!-- <dv-border-box-12 class="icon-layout border11" :color="['#296db1']">
      <a-icon type="reconciliation" class="icon"></a-icon>
      <div class="right">
        <p class="large">
          {{ dataV[0]['num'] ? dataV[0]['num'] : '/' }}
        </p>
        <p class="text">在产工单数</p>
      </div>
    </dv-border-box-12>
    <dv-border-box-12 class="icon-layout border11" :color="['#296db1']">
      <a-icon type="import" class="icon"></a-icon>
      <div class="right">
        <p class="large">
          {{ dataV[2]['num'] ? dataV[2]['num'] : '/' }}
        </p>
        <p class="text">入库工单数</p>
      </div>
    </dv-border-box-12>
    <dv-border-box-12 class="icon-layout border11" :color="['#296db1']">
      <a-icon type="hourglass" class="icon"></a-icon>
      <div class="right">
        <p class="large">
          {{ dataV[1]['num'] ? dataV[1]['num'] : '/' }}
        </p>
        <p class="text">待入库工单数</p>
      </div>
    </dv-border-box-12>
    <dv-border-box-12 class="icon-layout border11" :color="['#296db1']">
      <a-icon type="close-square" class="icon"></a-icon>
      <div class="right">
        <p class="large">
          {{ dataV[3]['num'] ? Number(dataV[3]['num']).toFixed(2) : '/' }}
        </p>
        <p class="text">不合格产量(KG)</p>
      </div>
    </dv-border-box-12> -->
  </div>
</template>

<script>
export default {
  name: 'Num',
  data() {
    return {}
  },
  props: {
    dataV: {
      type: Array,
      default: function() {
        return []
      },
    },
  },
}
</script>

<style scoped>
.num-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  height: 100%;
}
.large {
  font-size: 22px;
  /* color: #68d8fe; */
  color: #2fded6;
  margin-bottom: 2px;
}
.icon-layout .icon {
  width: 55px;
  font-size: 30px;
  color: #2fded6;
  text-align: right;
  padding-right: 5px;
}
.icon-layout .right {
  flex: 1;
}
.right .text {
  color: #ccc;
  font-size: 10px;
}
</style>
